<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位讲解</title>
    <style>
      body {
        /* 设置居中 */
        width: 800px;
        margin: 0 auto;

        /* 为了出现下拉框，设置高度 */
        height: 1024px;
        border: 5px solid black;
      }


      section {
        border: 1px solid red;
        padding: 5px;
        margin: 0px 10px 0px 10px;
      }


      
      article {
        border: 2px solid greenyellow;
      }

      p {
        background-color: rgb(207, 232, 220);
        border: 2px solid rgb(79, 185, 227);
        padding: 10px;
        /* margin: 10px; */
        border-radius: 5px;
      }



      .static {
        position: static;
      }
      .relative {
        position: relative;
      }
      .relative+.relative {
        position: relative;
        left:10px;
      }

      .fixed {
        position: fixed;
        /* bottom: 0;
        right: 0; */
      }

      .absolute {
        position: absolute;
        /* top: 30px;
        left: 30px; */
      }


/* 
      div {
        background-color: rgb(207, 232, 220);
        border: 2px solid rgb(79, 185, 227);
        height: 100px;
        border-radius: 5px;
      } */
    </style>
  </head>
  <body>
    <h1>定位测试</h1>
    <section>
      <article>
        <!-- <h2>position:static(默认)</h2> -->
        <p class="static">
          static 是默认值。任意 position: static; 的元素不会被特殊的定位。
        </p>
      </article>

      <article>
        <!-- <h2>position:relative</h2> -->
        <p class="relative">
          relative 表现的和 static 一样，除非你添加了一些额外的属性。
        </p>
        <p class="relative">
          在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
        </p>
      </article>

      <article  class="fixed">
        <!-- <h2>position:fixed</h2> -->
        <p>
          一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 `relative` 一样， `top` 、 `right` 、 `bottom` 和 `left` 属性都可用。
        </p>
      </article>

      <!-- <article  class="absolute">

        <p>
          absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。 `relative` 一样， `top` 、 `right` 、 `bottom` 和 `left` 属性都可用。
        </p>
      </article> -->

    </section>

    <!-- <div>
      <h2>static定位</h2>
      <p>I am a basic block level element.</p>
      <p>I am a basic block level element.</p>
      <p>I am a basic block level element.</p>
    </div>

    <div>
      <h2>releative定位</h2>
      <p>I am a basic block level element.</p>
      <p class="relative">I am a basic block level element.</p>
      <p>I am a basic block level element.</p>
    </div>

    <div>
      <h2>absolute定位</h2>
      <p>I am a basic block level element.</p>
      <p class="absolute">I am a basic block level element.</p>
      <p>I am a basic block level element.</p>
    </div> -->
  </body>
</html>
